/*
 * @Author: 曹澳龙
 * @Date: 2023-08-02 11:58:10
 * @LastEditTime: 2023-08-02 11:58:10
 * @LastEditors: 曹澳龙
 * @Description:
 *
 */

import {Component} from "react";
import "./index.css";

class Footer extends Component<any, any> {

    handleCheckAll = (e: any) => {
        const {checkAllTodo} = this.props;
        checkAllTodo(e.target.checked);
    }

    handleClearAllCheck = () => {
        const {clearAllDone} = this.props;
        clearAllDone();
    }

    render() {

        const {todos} = this.props;
        let doneCount = todos.reduce((pre: number, todo: any) => {return todo.done ? pre + 1 : pre}, 0);
        let totalCount = todos.length;

        return (
            <div className="todo-footer">
                <label>
                    <input
                        type="checkbox"
                        checked={doneCount === totalCount && totalCount > 0} onChange={this.handleCheckAll}/>
                </label>
                <span>
                <span>已完成{doneCount}</span> / 全部{totalCount}
                </span>
                <button className="btn btn-danger" onClick={this.handleClearAllCheck}>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;